<template>
  <div>
    <common-header title="商品详情"></common-header>
    <!-- 商品轮播 -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="img in detail.pics" :key="img.id">
        <img :src="img.pic" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 商品名称 -->
    <div class="goodsName">
      <h1 v-if="detail.basicInfo"> <!-- 请求是异步的，所以起初detail是空的，那么detail.basicInfo是undefined,undefine.name会报错的 -->
        {{detail.basicInfo.name}}
      </h1>
    </div>
    <!-- 商品价格 -->
    <div class="price">
      <span v-if="detail.basicInfo">{{detail.basicInfo.minPrice | currency}}</span>
      <s v-if="detail.basicInfo">{{detail.basicInfo.originalPrice | currency}}</s>
    </div>
    <div class="divideBg"></div>
    <!-- 商品详情 -->
    <div class="goodsDetail">
      <div class="title">
        <span>商品详情</span>
        <span class="env">Details</span>
      </div>
      <div class="goodsImg" v-html="detail.content"></div>
    </div>
    <div class="copyright">
      CopyRight©2007-2020 安徽省合肥市包河区东方广场
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="主页" size="24" @click="$router.push('/home')" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" :badge="cartItems.length?cartItems.length:''"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="showSku(0)" />
      <van-goods-action-button type="danger" text="立即购买" @click="showSku(1)"/>
    </van-goods-action>
    <!-- Sku商品规格 -->
    <van-popup v-model="show" position="bottom" closeable :style="{ height: '40%' }" :close-on-click-overlay="false">
      <van-card
        :price="sku.minPrice"
        :origin-price="sku.originalPrice"
        desc="请选择颜色、尺码"
        :title="sku.name"
        :thumb="sku.pic"
      >
        <template #footer>
          <van-stepper v-model="sku.num" theme="round" button-size="22" disable-input />
          <van-goods-action>
            <van-goods-action-button type="danger" text="确认" @click="confirmCart"/>
          </van-goods-action>
        </template>
      </van-card>
    </van-popup>
  </div>
</template>

<script>
import { getDetailBanner } from '@api'
import { currency } from '@filters'
import CommonHeader from '@components/CommonHeader'
import { mapMutations, mapState } from 'vuex'
import { Toast } from 'vant'
export default {
  data () {
    return {
      detail: {},
      show: false, // 商品规格弹窗关闭
      sku: {}, // 商品的规则信息对象
      addOrBuy: 0 // 0是添加购物车，1是立即购买
    }
  },
  created () {
    this.fetchDecBanner()
  },
  methods: {
    showSku (diff) {
      // 进行购买还是加入购物车的赋值操作
      this.addOrBuy = diff
      this.show = true
    },
    confirmCart () {
      if (this.addOrBuy) {
        alert('立即购买')
        this.show = false
      } else {
        // 看看商品是否已经存在于购物车，如果存在就提醒不可以再添加，否则添加进去
        const isExist = this.cartItems.find(ele => ele.id === this.sku.id)
        if (isExist) {
          Toast('商品已经在您的购物车中，请不要重复添加')
        } else {
          this.addCart(this.sku)
          Toast('添加购物车成功')
          this.show = false
        }
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    fetchDecBanner () {
      getDetailBanner({ id: this.$route.params.id })
        .then(res => {
          if (res.data.code === 0) {
            this.detail = res.data.data
            this.sku = {
              ...res.data.data.basicInfo,
              num: 1,
              isChecked: true
            }
          }
        })
    },
    ...mapMutations('cart', ['addCart'])
  },
  filters: {
    currency
  },
  components: {
    CommonHeader
  },
  computed: {
    ...mapState({
      cartItems: state => state.cart.carts.items
    })
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #000;
  position: fixed;
  z-index: 3;
  width: 100%;
  color: #fff;
  height: 1.5rem;
  line-height: 1.5rem;
  /deep/ .van-icon {
    font-size: 28PX;
    color: #fff;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 18PX;
  }
}
.van-swipe-item {
  height: 300px;
  padding-top: 56.25PX;
  img {
    width: 100%;
    height: 100%;
  }
}
.goodsName {
  width: 100%;
  background-color: #515150;
  box-sizing: border-box;
  padding: 10PX 20PX;
  color: #fff;
  h1 {
    font-size: 16PX;
    line-height: 25PX;
    font-weight: 400;
  }
}
.price {
  margin-top: 10PX;
  box-sizing: border-box;
  padding-left: 20PX;
  padding-bottom: 36PX;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e0e0e0;
  span {
    color: #d0021b;
    font-size: 22PX;
  }
  s {
    font-size: 18PX;
    color: #b0b0b0;
    margin-left: 10PX;
  }
}
.goodsDetail {
  .title {
    box-sizing: border-box;
    padding-left: 20PX;
    height: 40px;
    border-bottom: 1px solid #e0e0e0;
    line-height: 40px;
    font-size: 16PX;
    color: #444;
    .env {
      color: #a0a0a0;
      font-size: 13PX;
      font-weight: 700;
      margin-left: 5PX;
    }
  }
  .goodsImg {
    /deep/ .wscnph {
      width: 100%;
      vertical-align: bottom;
    }
  }
}
.copyright {
  height: 60PX;
  background-color: #eee;
  line-height: 60PX;
  color: #666;
  font-size: 14PX;
  text-align: center;
  margin-bottom: 50px;
}
/deep/ .van-goods-action {
  border-top: 1px solid #d0d0d0;
}
/deep/ .van-card__price-integer {
  color: #f66;
  font-size: 18PX;
}
/deep/ .van-card__price-currency {
  color: #f66;
  font-size: 18PX;
}
/deep/ .van-popup__close-icon--top-right {
  top: 3px;
  right: 0;
  font-size: 16PX;
}
/deep/ .van-card {
  background-color: #fff;
}
/deep/ .van-card__desc {
  margin-top: 5PX;
}
/deep/ .van-stepper {
  margin-top: 20PX;
}
/deep/ .van-nav-bar__left {
  padding: 0 8PX;
}
/deep/ .van-goods-action {
  border: none;
}
</style>
